<template>
	<div>
		<el-form>
			<div class="container">
				<h3>原料信息</h3>
				<el-table
				    :data="ruleForm.materialList"
				    border
				    style="margin-top:20px;"
				    ref="multipleTable"
				    header-cell-class-name="table-header"
				>
				    <el-table-column prop="breedName" sortable label="品名"></el-table-column>
				    <el-table-column prop="batch" sortable label="批号"></el-table-column>
				    <el-table-column prop="type" sortable label="来源"></el-table-column>
				    <el-table-column prop="place" sortable label="地块/供应商"></el-table-column>
				    <el-table-column sortable label="数量">
				        <template slot-scope="scope">{{scope.row.number}}{{scope.row.units}}</template>
				    </el-table-column>

				</el-table>
			</div>
			<div class="container" style="margin-top:20px;">
				<h3>加工信息</h3>
				<el-form-item label="加工工艺" style="margin-top:20px;">
					{{ruleForm.detailList[0].technology}}
				</el-form-item>
				<div class="addtend" v-for="(s,index) in ruleForm.technologyList" :key="index"  style="margin:30px;padding:10px;font-size:8px;position:relative;">
				    <div style="width:20px; margin:0 auto;line-height:24px;font-size:12px;position: absolute;right:0px;top:0px;background:#3aa0ff;text-align: center;color:white;">{{s.methodName}}</div>
				    <el-form-item label="加工时间">
					    {{s.beginTime}}至{{s.endTime}}
				    </el-form-item>
				    <el-form-item label="负责人">
						{{s.userName}}
						<el-button v-if="s.equipmentName" type="danger" round size="mini"  style="float: right;margin-right:20px;">查看监控</el-button>

				    </el-form-item>
				    <img :src="$store.state.plantImg + s.processImg" alt="" style="width:300px;height:130px;">
				</div>
			</div>
			<div class="container" style="margin-top:20px;margin-bottom: 100px">
				<h3>成品信息</h3>
				<el-table
				    :data="ruleForm.detailList"
				    border
				    style="margin-top:20px;"
				    ref="multipleTable"
				    header-cell-class-name="table-header"
				>
				    <el-table-column prop="productName" sortable label="品名"></el-table-column>
				    <el-table-column prop="batch" sortable label="批号"></el-table-column>
				    <el-table-column prop="grade" sortable label="品级"></el-table-column>
				    <!-- <el-table-column prop="place" sortable label="地块/供应商"></el-table-column> -->
				    <el-table-column sortable label="成品数量">
				        <template slot-scope="scope">{{scope.row.surplusNumber}}{{scope.row.units}}</template>
				    </el-table-column>
					<el-table-column sortable label="关联介绍">
						 <template slot-scope="scope">
							 <span v-if="scope.row.productId != '' && scope.row.productId != null">已关联</span>
							 <el-button type="text" v-else @click="open(scope.$index,scope.$row)">关联</el-button>
						 </template>
					</el-table-column>
				</el-table>
			</div>


<!--           <div class='container' style="margin-top:20px;margin-bottom: 100px">-->
<!--               &lt;!&ndash; 除了这个用工都不是我写的 2024.5.21 Sameki &ndash;&gt;-->
<!--               <h3 style='margin: 20px 0'>用工记录</h3>-->
<!--               <el-row>-->
<!--                   <el-col style='padding: 10px 0'>-->
<!--                       <el-button class='theme-button' @click='download' style='float: right'>导出</el-button>-->
<!--                       <el-upload-->
<!--                           class="upload-import"-->
<!--                           ref="upload"-->
<!--                           action=""-->
<!--                           :on-change="importExcel"-->
<!--                           accept=".xlsx,.xls"-->
<!--                           :show-file-list='false'-->
<!--                           :auto-upload="false">-->
<!--                           <el-button class='theme-button' slot="trigger" size="small">导入</el-button>-->
<!--                       </el-upload>-->
<!--                       <el-button class='theme-button' style='float: right;margin-right: 10px' @click='downloadTemplate'>下载导入模板</el-button>-->
<!--                   </el-col>-->
<!--               </el-row>-->
<!--               <el-table border stripe :data="workerTableData">-->
<!--                   <el-table-column align='center' prop="name" label="姓名">-->
<!--                       <template slot-scope="scope">-->
<!--                           <el-input v-model="scope.row.name" placeholder="请输入内容" @blur='saveWorkTable(scope.row)'></el-input>-->
<!--                       </template>-->
<!--                   </el-table-column>-->
<!--                   <el-table-column align='center' prop="tache" label="用工类型"></el-table-column>-->
<!--                   <el-table-column align='center' prop="startDate" label="开始时间"></el-table-column>-->
<!--                   <el-table-column align='center' prop="endDate" label="结束时间"></el-table-column>-->
<!--                   <el-table-column align='center' prop="workHours" label="工时">-->
<!--                       <template slot-scope="scope">-->
<!--                           <el-input v-model="scope.row.workHours" placeholder="请输入内容" @blur='saveWorkTable(scope.row)'></el-input>-->
<!--                       </template>-->
<!--                   </el-table-column>-->
<!--                   <el-table-column align='center' prop="money" label="用工金额(元)">-->
<!--                       <template slot-scope="scope">-->
<!--                           <el-input v-model="scope.row.money" placeholder="请输入内容" @blur='saveWorkTable(scope.row)'>-->
<!--                               <template slot="suffix">-->
<!--                                   <span style='position: absolute;top: 4px;right: 5px'>元</span>-->
<!--                               </template>-->
<!--                           </el-input>-->
<!--                       </template>-->
<!--                   </el-table-column>-->
<!--                   <el-table-column align='center'  label="操作">-->
<!--                       <template slot-scope="scope">-->
<!--                           <el-button type="text" @click="handleDel(scope.row)">删除</el-button>-->
<!--                       </template>-->
<!--                   </el-table-column>-->
<!--               </el-table>-->
<!--               <el-pagination background :current-page="currentPageWork" :page-sizes="[10, 20, 30, 40]" :page-size="pageSizeWork" layout="total, sizes, prev, pager, next, jumper" :total="totalWork" @size-change="handleSizeChange" @current-change="handleCurrentChangeWork"></el-pagination>-->
<!--               &lt;!&ndash; 除了这个用工都不是我写的 2024.5.21 Sameki &ndash;&gt;-->
<!--           </div>-->


      <el-dialog title="选择产品介绍" :visible.sync="dialogTableVisible1">
        <el-table
            :data="tableData1"
            border
            style="margin-top:20px;"
            ref="multipleTable"
            header-cell-class-name="table-header"
        >
          <el-table-column prop="img" sortable label="产品图">
            <template slot-scope="scope">
              <img :src="$store.state.imageUrls + scope.row.img" alt="" style="width:50px; height:50px;" v-if="scope.row.img != '' || scope.row.img!= null ">
            </template>
          </el-table-column>
          <el-table-column prop="title" sortable label="产品标题"></el-table-column>
          <!-- <el-table-column prop="createTime" sortable label="添加时间"></el-table-column> -->
          <el-table-column prop="relatedProducts" sortable label="关联产品"></el-table-column>
          <el-table-column prop="quality" sortable label="保质期"></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                  type="text"
                  @click="handleSelectProductDetails(scope.$index, scope.row)"
              >选择</el-button>

            </template>
          </el-table-column>
        </el-table>
        <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage1"  @current-change="handleCurrentChange1" :total="total1" style="margin-top:20px"></el-pagination>

      </el-dialog>
      <el-form>
			    <el-form-item class="footerFixed">
			       <div class='fixed'>
                       <el-button class='theme-button' @click="backPage">返回</el-button>
                   </div>
			    </el-form-item>
			</el-form>
		</el-form>
	</div>
</template>

<script>
	import { process_findById,products_findByList,process_bind,getPlantLaborList,updateRecoveryLabor,updatePlantLabor } from "@/request/api.js"
    import axios from 'axios';
	export default {
		data(){
			return{
				id:'',
				ruleForm:{},
        tableData1:{},
        total1:0,
        currentPage1:1,
        pagesize:10,
        dialogTableVisible1:false,
        index:'',

        workerTableData:[],
        currentPageWork:1,
        pageSizeWork:10,
        totalWork:0,
			}
		},
		mounted(){
			this.id = this.$route.query.id
			this.init()
      this.getTableList()
		},
		methods:{
            // 导出
            async download() {
                this.downloadFile(`/labor/exportLaborData?batch=${this.ruleForm.batch}`,'用工记录')
            },
            async importExcel(file){
                let formData = new FormData()
                formData.append('file',file.raw)
                formData.append('type','reap')
                formData.append('batch',this.ruleForm.detailList[0].batch)
                const res = await updateRecoveryLabor(formData)
                if(res.code == 200){
                    this.$notify({
                        title: '操作成功',
                        message: '导入成功',
                        type: 'success'
                    })
                    this.getWorkDetail()
                }else{
                    this.$notify({
                        title: '操作失败',
                        message: res.msg,
                        type: 'error'
                    })
                    this.getWorkDetail()
                }
            },
            //下载xlsx文件
            downloadFile(url,fileName){
                //由于之前的前端没有封装导入模板接口，所以只能用axios
                axios.get(localStorage.getItem('requestUrl')+url,{responseType:'arraybuffer'}).then(res=>{
                    const blob = new Blob([res.data],{type:'application/vnd.ms-excel'})
                    const url = window.URL.createObjectURL(blob)
                    const link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download',`${fileName}.xlsx`)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link)
                    window.URL.revokeObjectURL(url)
                    this.$notify({
                        title: '操作成功',
                        message: '下载成功',
                        type: 'success'
                    })
                })
            },
            //下载导入模板
            //type (1=农事用工, 2=种植用工, 3=加工用工, 4=采收用工)
            async downloadTemplate() {
                this.downloadFile('labor/exportLaborTemplate?type=3','加工导入模板')
            },
            handleSizeChange(v){
                this.pageSize = v
                this.getWorkDetail()
            },
            handleCurrentChangeWork(val) {
                this.pageSize = val
                this.getWorkDetail()
            },

            async saveWorkTable(params){
                console.log(params);
                const res = await updatePlantLabor(params)
                if(res.code == 200){
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                }
            },
            //查询用工记录数据
            async getWorkDetail(){
                let params = {
                    page: this.currentPageWork,
                    PageSize: this.pageSizeWork,
                    batch:this.ruleForm.detailList[0].batch
                }
                console.log(params);
                const res = await getPlantLaborList(params)
                if(res.code == 200){
                    this.workerTableData = res.data.content
                    this.workerTableData.forEach((item)=>{
                        item.tache = '加工'
                    })
                    this.totalWork = res.data.totalElements
                    console.log(this.workerTableData,'表格数据');
                }
            },




      handleSelectProductDetails(index,row){
        var str = this.ruleForm.detailList[this.index].id + "/" + row.id
        process_bind(str).then((res)=>{
          this.init()
          this.dialogTableVisible1 = false
        })
      },
      open(index,row){
        this.index = index
        this.dialogTableVisible1 = true
      },
      getTableList(){
        let data = {
          page:this.currentPage1,
          query:this.searchName1
        }
        products_findByList(data).then((res)=>{
          this.tableData1 = res.rows
          this.total1 = res.total
        })
      },
        handleCurrentChange1(val){
          this.currentPage1 = val
          this.getTableList()
        },

			backPage(){
				this.$router.go(-1)
			},
			init(){
				process_findById(this.id).then((res)=>{
					this.ruleForm = res.data
                    console.log(this.ruleForm);
                    this.getWorkDetail()
				})
			}

		}
	}
</script>

<style lang="less" scoped="scoped">
@import "@/assets/css/common.less";
.el-pagination{
    margin-top: 10px;
    text-align: right;
}
	.addtend{
	    display:inline-block;
	    width: 300px;
	    margin-left:20px;
	    /* margin:20px; */
	    height:250px;
		border: 1px solid #999;

	    /* line-height:200px;
	    text-align: center; */
	    background:#fff;
	}
</style>
